<template>
  <div class="publish-setting-container">
    <div class="container">
      <div :class="['header', isFirst ? 'bdb' : '']">
        <div class="title">树懒发房，简单、好用</div>
        <div class="step" v-if="isFirst">
          <el-steps :active="0" process-status="finish">
            <el-step title="发房设置" description="系统已默认最佳设置，一键保存"></el-step>
            <el-step title="选择发布房源" description="支持批量选择、批量发布"></el-step>
            <el-step title="点击发布" description="1秒提交发布任务，简单"></el-step>
          </el-steps>
        </div>
      </div>
      <div class="select">
        <el-form ref="form" :model="form" :rules="rules" label-position="top">
          <template>
            <el-form-item v-for="item in selectOptions" :key="item.id" :label="item.title">
              <el-radio-group class="select-item" v-model="form[item.id]">
                <el-radio class="lhl" v-for="itx in item.options" :key="itx.value" :label="itx.value">
                  {{ itx.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </template>
          <el-form-item label="9.默认佣金比例：" class="d-flex">
            <el-row :gutter="20">
              <el-col :span="10" :offset="1">
                <el-form-item prop="saleProportion">
                  <el-input
                    v-model="form.saleProportion"
                    placeholder="请输入出售佣金"
                    maxlength="6"
                    @input="form.saleProportion = onlyNumber(form.saleProportion)"
                  >
                    <span class="text-black" slot="suffix">%</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="rentProportion">
                  <el-input
                    v-model="form.rentProportion"
                    placeholder="请输入出租佣金"
                    maxlength="6"
                    @input="form.rentProportion = onlyNumber(form.rentProportion)"
                  >
                    <span class="text-black" slot="suffix">月租金</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="10.服务介绍：" class="d-flex">
            <el-input
              class="introduction-input"
              v-model.trim="form.serviceIntroduction"
              maxlength="300"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="submit">
        <el-button class="submit-btn" type="primary" round @click="onSubmit('form')" :disabled="!isCheck">
          保存发房设置
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { isNotEmptyObj } from '@/utils/utilsNew';
import { validCommissionRange, isCommissionNumber } from '@/utils/validate';

export default {
  name: 'PublishHouseSetting',
  components: {},
  props: {
    currentSetting: {
      type: Object,
      default: null,
    },
  },
  data() {
    const validateSaleProportion = (rule, value, callback) => {
      const formatValue = Number(value);
      if (!isCommissionNumber(value)) {
        return callback(new Error(rule.message));
      }
      if (!validCommissionRange(formatValue)) {
        return callback(new Error(rule.message));
      }
      callback();
    };
    return {
      selectOptions: [
        {
          id: 'autoHushihao',
          title: '1.当发布安居客58网站时，户室号为空或不正确时，您希望：',
          options: [
            { label: '系统自动随机选择其他面积接近的户室号进行发布(保证房源发布成功率)', value: '0' },
            { label: '不进行发布，提示我重新填充户室号(适用必须保证户室号发布正确的用户)', value: '1' },
          ],
        },
        {
          id: 'autoPrice',
          title: '2.发布房源时，如果价格不符合端口要求，您希望：',
          options: [
            { label: '系统自动调整价格再发布', value: '0' },
            { label: '不进行发布，提示我重新更改价格后进行发布', value: '1' },
          ],
        },
        {
          id: 'autoVideo',
          title: '3. 选择发布视频房源时，若房源不存在视频，您希望：',
          options: [
            { label: '系统自动利用房源图片合成视频并推送为视频房源', value: '0' },
            { label: '不发布视频房源，发布为普通房源', value: '1' },
          ],
        },
        {
          id: 'repeatHouse',
          title: '4.当树懒同一房源再次发布到相同端口网站时，您希望：',
          options: [
            { label: '首先删除上次发布的房源(若房源在付费推广则不删除)，再发布新房源，避免重复违规', value: '0' },
            { label: '保留上次发布的房源，直接发布一条新房源(需慎重，容易造成重复房源)', value: '2' },
            { label: '不发布房源', value: '1' },
          ],
        },
        {
          id: 'noPort',
          title: '5.当上架推广房源，端口剩余推广资源不足时，您希望：',
          options: [
            { label: '下架最旧的推广中的房源，推广新发布的房源', value: '0' },
            { label: '新的房源不进行上架推广', value: '1' },
          ],
        },
        {
          id: 'noHouseCapacity',
          title: '6.当端口网站房源库存总量已满，无法发布新房源时，您希望：',
          options: [
            { label: '先自动删除最旧的房源，再发布新房源', value: '0' },
            { label: '不发布新的房源', value: '1' },
          ],
        },
        {
          id: 'noVideoCapacity',
          title: '7.当端口网站视频库总量已满，无法发布新的视频时，您希望：',
          options: [
            { label: '先自动删除最旧的视频，再发布新的视频', value: '0' },
            { label: '不发布新的视频', value: '1' },
          ],
        },
        {
          id: 'autoVerifyCode',
          title: '8.当房源核验码为空时，无法进行核验时，您希望：',
          options: [
            { label: '系统推荐可用的核验码并自动进行核验', value: '0' },
            { label: '不进行推荐，提示我人工上传核验码进行推送', value: '1' },
          ],
        },
      ],
      form: {
        autoHushihao: '0',
        autoPrice: '0',
        autoVideo: '0',
        repeatHouse: '0',
        noPort: '0',
        noHouseCapacity: '0',
        noVideoCapacity: '0',
        autoVerifyCode: '0',
        saleProportion: '1',
        rentProportion: '0.5',
        serviceIntroduction: '',
      },
      rules: {
        saleProportion: [
          { required: true, message: '请输入出售佣金', trigger: 'blur' },
          { validator: validateSaleProportion, message: '请填写0.5~5之间的数字', trigger: 'blur' },
        ],
        rentProportion: [
          { required: true, message: '请输入出租佣金', trigger: 'blur' },
          { validator: validateSaleProportion, message: '请填写0.5~5之间的数字', trigger: 'blur' },
        ],
      },
    };
  },

  computed: {
    isCheck() {
      const { form } = this;
      return Object.keys(form).every((item) => {
        if (form[item] || item === 'serviceIntroduction') return true;
      });
    },
    isFirst() {
      let { currentSetting } = this;
      return !(currentSetting && isNotEmptyObj(currentSetting));
    },
  },

  watch: {
    currentSetting: {
      handler: function(val) {
        if (!val) return;
        const { form } = this;
        Object.keys(form).forEach((item) => {
          form[item] = val[item];
        });
      },
      immediate: true,
    },
  },

  beforeMount() {},

  mounted() {},

  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.form);
        } else {
          return false;
        }
      });
    },

    onlyNumber(value) {
      return value.replace(/[^\d^\.]+/g, '');
    },
  },
};
</script>
<style lang="scss" scoped>
.publish-setting-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  width: 1000px;
  height: 90%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
  overflow: hidden;
}

.header {
  padding: 30px 60px 20px;
  background-color: #fff;

  .title {
    font-weight: 700;
    font-size: 20px;
  }

  .step {
    width: 850px;
    padding-top: 30px;
  }
}

.select {
  flex: 1;
  padding: 20px 60px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 999px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }

  &::-webkit-scrollbar-track {
    border-radius: 999px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.1);
  }

  .select-item {
    display: flex;
    flex-direction: column;
    padding-left: 20px;
  }
}

.introduction-input {
  margin-left: 38px;
  width: 700px;

  & /deep/ .el-input__inner {
    padding-right: 60px;
  }
}

.submit {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;

  .submit-btn {
    border-radius: 999px;
    width: 240px;
    height: 48px;
  }
}
</style>
